<template>
  <div v-if="showList">
    <div style="width: 80%;margin: auto;">
      <el-skeleton :rows="5" animated v-if="record == []" />
      <el-table :data="record" style="margin: auto;" v-else>
        <el-table-column prop="aName" label="玩家1" :width="w * 0.2" />
        <el-table-column prop="bName" label="玩家2" :width="w * 0.2" />
        <el-table-column prop="loserName" label="败方" :width="w * 0.2" />
        <el-table-column prop="createtime" label="时间" :width="w * 0.2" />
        <el-table-column label="Operations">
          <template #default="scope">
            <el-button @click="more(scope.$index, scope.row)">
              查看更多
            </el-button>
            <el-button @click="replay(scope.$index, scope.row)">
              回放
            </el-button>
          </template>
        </el-table-column>
      </el-table>
      <div style="width: 50%;margin: 5vh auto 0px auto;">
        <el-pagination background layout="prev, pager, next,sizes" :total=length style="margin-top:auto 5vh;"
          :hide-on-single-page="false" @current-change="handleChange" @size-change="handleSizeChange"
          :page-sizes="[10, 20, 50,]" />
      </div>
    </div>
    <el-dialog v-model="dialogVisible" title="本局详情" width="500" :before-close="handleClose"
      style="background-color:white;">
      <template #footer>
        <el-descriptions border :column="2" :size="large">
          <el-descriptions-item label="玩家1">{{ game.aName }}</el-descriptions-item>
          <el-descriptions-item label="出战BOT">{{ game.abotName }}</el-descriptions-item>
          <el-descriptions-item label="玩家2">{{ game.bName }}</el-descriptions-item>
          <el-descriptions-item label="出战BOT">{{ game.bbotName }}</el-descriptions-item>
          <el-descriptions-item label="胜者加分">{{ game.winscore }}</el-descriptions-item>
          <el-descriptions-item label="败者扣分">{{ game.losescore }}</el-descriptions-item>
          <el-descriptions-item label="败方">{{ game.loserName }}</el-descriptions-item>
        </el-descriptions>
      </template>
    </el-dialog>
  </div>

  <div v-else>
    <groundComponets ref="replayShow" />
  </div>
  <el-dialog v-model="doneDialog" width="500" :before-close="handleClose" :close-on-click-modal="false"
    :close-on-press-escape="false" :show-close="false" style="background-color:rgba(132, 132, 132, 0.624) ;">
    <div class="main">回放结束</div>
    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="ret">
          返回
        </el-button>
      </div>
    </template>
  </el-dialog>
</template>

<script>
import groundComponets from '@/components/pk/groundComponets.vue';
import store from '@/store';
import { setInterval, setTimeout } from 'core-js';
import $ from 'jquery';
import { ref } from 'vue';
export default {
  name: 'contestShowView',
  components: {
    groundComponets,
  },
  setup() {
    let record = ref('');
    let length = ref('0');
    let nowPage = ref("0");
    let nowSize = ref("10");
    let dialogVisible = ref(false);
    let game = ref('');
    let showList = ref(true);
    let mapDialog = ref(false);
    let doneDialog = ref(false);
    let replayShow = ref(null);
    let getInfo = () => {
      $.ajax({
        type: "post",
        url: "http://124.221.73.180:3000/recordCRUD/getAllRecord/",

        data: {
          page: nowPage.value,
          sizes: nowSize.value,
        },

        success(resp) {
          setTimeout(() => {
            record.value = resp.record;
            length.value = resp.length;
          }, 500); // 延迟2000毫秒（2秒）

        }
      })
    }
    let handleChange = (page) => {
      nowPage.value = page;
      getInfo();
      goTop();
    }
    let handleSizeChange = (size) => {
      nowSize.value = size;
      getInfo();
      goTop();
    }
    let goTop = () => {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      });
    }
    let ret = () => {
      showList.value = true;
      doneDialog.value = false;
      store.commit("clear");
    }
    let more = (index, data) => {
      dialogVisible.value = true;
      game.value = data;
    }

    let replay = (index, data) => {
      let temp = ref(data);
      temp.value.map = JSON.parse(temp.value.map);
      temp.value.asteps = JSON.parse(temp.value.asteps);
      temp.value.bsteps = JSON.parse(temp.value.bsteps);
      store.commit("updateGame", temp.value);
      showList.value = false;

      setTimeout(() => {
        const t = store.state.Pk.gameObject;
        const [snake0, snake1] = t.snakes;
        let timer = null;
        let i = ref(0), j = ref(0);
        timer = setInterval(() => {
          let loserId = ref(0);
          if (data.loser == data.aid) loserId.value = 0;
          else if (data.loser == data.bid) loserId.value = 1;
          if (j.value == temp.value.bsteps.length - 1 && "all" == data.loser) {
            snake1.status = "die";
            snake0.status = "die";
            clearInterval(timer);
            doneDialog.value = true;
            store.commit("clear");
            getInfo();
            return;
          } else if (i.value == temp.value.asteps.length - 1 && snake0.id == loserId.value) {
            snake0.status = "die";
            clearInterval(timer);
            doneDialog.value = true;
            store.commit("clear");
            getInfo();
            return;
          } else if (j.value == temp.value.bsteps.length - 1 && snake1.id == loserId.value) {
            snake1.status = "die";
            clearInterval(timer);
            doneDialog.value = true;
            store.commit("clear");
            getInfo();
            return;
          }
          snake0.setDirection(temp.value.asteps[i.value++]);//设置蛇走的方向
          snake1.setDirection(temp.value.bsteps[j.value++]);
        }, 1000)

      }, 1000);



    }
    getInfo();

    return {
      dialogVisible,
      more,
      replay,
      game,
      showList,
      mapDialog,
      ret,
      doneDialog,
      replayShow,

      getInfo,
      handleChange,
      handleSizeChange,
      length,
      record,
    }
  }
}
</script>

<style scoped>
.main {
  font-size: 40px;
  text-shadow: 5px 5px 5px black, 0px 0px 2px black;
  font-style: italic;
  color: white;
  text-align: center;
  width: 97%;
}
</style>